import React from 'react';
import { ChevronRightIcon } from 'lucide-react';
export const NewbornPage = () => {
  const categories = [{
    id: 'sleep',
    title: 'Sleep',
    image: 'https://images.unsplash.com/photo-1590004987763-0a9a4cb5e5c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Cribs, bassinets, swaddles, and sleep aids'
  }, {
    id: 'feeding',
    title: 'Feeding',
    image: 'https://images.unsplash.com/photo-1584814369280-712ede580bee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Bottles, nursing supplies, and feeding accessories'
  }, {
    id: 'clothing',
    title: 'Clothing',
    image: 'https://images.unsplash.com/photo-1522771930-78848d9293e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Bodysuits, sleepwear, and outfits for 0-3 months'
  }, {
    id: 'essentials',
    title: 'Essentials',
    image: 'https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Diapers, wipes, bath supplies, and health items'
  }];
  const featuredProducts = [{
    id: 'n1',
    name: 'Ergonomic Baby Carrier',
    image: 'https://images.unsplash.com/photo-1581952976147-5a2d15560349?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$89.99',
    rating: 4.9,
    reviewCount: 312
  }, {
    id: 'n2',
    name: 'Swaddle Blanket Set',
    image: 'https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$34.99',
    rating: 4.7,
    reviewCount: 256
  }, {
    id: 'n3',
    name: 'Digital Baby Monitor',
    image: 'https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$149.99',
    rating: 4.8,
    reviewCount: 189
  }, {
    id: 'n4',
    name: 'Portable Bassinet',
    image: 'https://images.unsplash.com/photo-1618375569909-3e7e0d5a7d0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$129.99',
    rating: 4.6,
    reviewCount: 217
  }];
  return <div className="w-full">
      {/* Hero Section */}
      <div className="bg-cream py-12 md:py-16">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl">
            <h1 className="font-nunito font-bold text-3xl md:text-4xl text-dark mb-4">
              Newborn Essentials (0-3 Months)
            </h1>
            <p className="font-inter text-gray-600 text-lg mb-6">
              Everything you need for your baby's first three months, carefully
              selected for safety, comfort, and convenience.
            </p>
            <div className="flex flex-wrap gap-3">
              <a href="#sleep" className="bg-terracotta text-white px-4 py-2 rounded-md hover:bg-terracotta/90 transition-colors text-sm font-medium">
                Sleep
              </a>
              <a href="#feeding" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Feeding
              </a>
              <a href="#clothing" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Clothing
              </a>
              <a href="#essentials" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Essentials
              </a>
            </div>
          </div>
        </div>
      </div>
      {/* Main Content */}
      <div className="container mx-auto px-4 md:px-6 py-12">
        {/* Categories */}
        <section className="mb-16">
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8">
            Newborn Categories
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {categories.map(category => <a key={category.id} href={`/newborn/${category.id}`} className="group block rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                <div className="aspect-[4/3] w-full">
                  <img src={category.image} alt={category.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-4 bg-white">
                  <h3 className="font-nunito font-semibold text-lg mb-1">
                    {category.title}
                  </h3>
                  <p className="text-sm text-gray-600 mb-2">
                    {category.description}
                  </p>
                  <div className="flex items-center text-terracotta text-sm font-medium">
                    <span>View products</span>
                    <ChevronRightIcon size={16} className="ml-1" />
                  </div>
                </div>
              </a>)}
          </div>
        </section>
        {/* Featured Products */}
        <section className="mb-16">
          <div className="flex justify-between items-center mb-8">
            <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark">
              Bestselling Newborn Products
            </h2>
            <a href="/newborn/all-products" className="text-terracotta hover:text-terracotta/80 flex items-center text-sm font-medium">
              View all
              <ChevronRightIcon size={16} className="ml-1" />
            </a>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {featuredProducts.map(product => <a key={product.id} href={`/product/${product.id}`} className="group block rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-white">
                <div className="aspect-square w-full">
                  <img src={product.image} alt={product.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-4">
                  <h3 className="font-nunito font-semibold text-lg mb-1">
                    {product.name}
                  </h3>
                  <div className="flex items-center mb-2">
                    <div className="flex text-yellow">
                      {[...Array(5)].map((_, i) => <svg key={i} className={`w-4 h-4 ${i < Math.floor(product.rating) ? 'text-yellow fill-current' : 'text-gray-300 fill-current'}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                        </svg>)}
                    </div>
                    <span className="text-xs text-gray-500 ml-1">
                      ({product.reviewCount})
                    </span>
                  </div>
                  <p className="font-medium text-terracotta">{product.price}</p>
                </div>
              </a>)}
          </div>
        </section>
        {/* Tips Section */}
        <section>
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8">
            Newborn Care Tips
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-3">
                Sleep Safety
              </h3>
              <p className="text-gray-600">
                Learn about safe sleep practices for your newborn, including
                crib setup and positioning.
              </p>
              <a href="/newborn/sleep-safety" className="mt-4 inline-flex items-center text-terracotta text-sm font-medium">
                Read more
                <ChevronRightIcon size={16} className="ml-1" />
              </a>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-3">
                Feeding Basics
              </h3>
              <p className="text-gray-600">
                Essential tips for breastfeeding, bottle feeding, and
                establishing good feeding routines.
              </p>
              <a href="/newborn/feeding-basics" className="mt-4 inline-flex items-center text-terracotta text-sm font-medium">
                Read more
                <ChevronRightIcon size={16} className="ml-1" />
              </a>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-3">
                Soothing Techniques
              </h3>
              <p className="text-gray-600">
                Discover gentle ways to comfort your crying baby and help them
                feel secure.
              </p>
              <a href="/newborn/soothing-techniques" className="mt-4 inline-flex items-center text-terracotta text-sm font-medium">
                Read more
                <ChevronRightIcon size={16} className="ml-1" />
              </a>
            </div>
          </div>
        </section>
      </div>
    </div>;
};